<template>
  <div
    class="f-wh-4-s1"
    :style="{ backgroundColor: props.backgroundColor }"
    :class="{ shoadow: props.showShadow, hideAngle: props.hideAngle }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  backgroundColor: {
    type: String,
    default: 'transparent'
  },
  showShadow: {
    type: Boolean,
    default: true
  },
  hideAngle: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped lang="scss">
.f-wh-4-s1 {
  // overflow: hidden;

  width: 100%;
  height: 100%;
  z-index: 320;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  background: linear-gradient(to left, #00fd15, #00fd15) left top no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) left top no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right top no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) right top no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) left bottom no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) left bottom no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat;
  background-size: 0.5px 10px, 10px 1px, 1px 10px, 10px 1px;
}
.shoadow {
  box-shadow: rgba(0, 253, 219, 0.5) 0px 0px 20px inset;
}

.hideAngle {
  background: none;
  border-radius: 4px;
}
</style>
